import React, { useCallback, useRef } from 'react';
import { GTable } from 'geminis-react';
import { Divider } from 'antd';
import styles from './components/tree.less';
import { CategoryTree } from '@/pages/workflow/category/components/tree';

export default () => {
  const table = useRef<any>();
  const tree = useRef<any>();

  const onTreeSelected = useCallback((selection: any) => {
    table.current.loadData(
      selection.selectedKeys[0] !== '' ? { parentId: selection.selectedKeys[0] } : { parentIdIsNull: true },
    );
  }, []);

  const onDeleted = useCallback(() => {
    tree.current.reloadSelectedNode();
  }, []);

  const schema = {
    headerTitle: '分类信息',
    data: {
      url: '/api/workflow/category',
      sort: ['showOrder:asc'],
    },
    manualRequest: true,
    action: {
      toolbar: {
        add: {
          form: {
            schemaPath: '/workflow-pc/schema/category/edit.json',
            onSubmitting: (value: any) => {
              const selectedNode = tree.current.selection.selectedNodes[0].data;
              value.parentId = selectedNode.id === '' ? null : selectedNode.id;
              value.parentPath = selectedNode.pathId;
            },
            onSubmitted: () => {
              tree.current.reloadSelectedNode();
            },
          },
        },
      },
      row: {
        edit: true,
        delete: true,
      },
    },
  };

  return (
    <div className={styles.main}>
      <div className={styles.tree}>
        <CategoryTree ref={tree} showRoot={true} onSelected={onTreeSelected} />
      </div>
      <Divider type="vertical" className={styles.fullHeight} />
      <div className={styles.content}>
        <GTable
          ref={table}
          schemaPath="/workflow-pc/schema/category/table.json"
          schema={schema}
          onDeleted={onDeleted}
        />
      </div>
    </div>
  );
}
;
